<template>
  <div>
    <div style='margin:50px 0 0 50px'>
      <el-button @click='dialogFormVisible=true'>添加权限</el-button>
    </div>
    <el-table
      highlight-current-row
      :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%">
      <el-table-column
        type="index"
        width="50"
        align="center"
        >
      </el-table-column>
      <el-table-column
        label="Url权限"
        prop="url">
      </el-table-column>
      <el-table-column
        label="Modal权限"
        prop="modal">
      </el-table-column>
      <el-table-column
        label="描述"
        prop="desc">
      </el-table-column>
      <el-table-column
        align="right">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="输入权限信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="url" :label-width="formLabelWidth">
          <el-input v-model="form.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="modal" :label-width="formLabelWidth">
          <el-input v-model="form.modal" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="desc" :label-width="formLabelWidth">
          <el-input v-model="form.desc" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { right_get, right_post } from "../axios_api/api";
export default {
  data() {
    return {
      form: {
        url: "",
        modal: "",
        desc: ""
      },
      dialogFormVisible: false,
      formLabelWidth: "120px",
      tableData: [],
      search: ""
    };
  },
  mounted() {
    this.get_rights();
  },
  methods: {
    // 提交修改
    submit(){
      right_post(this.form).then(resp=>{
        this.$message(resp.message)
        if(resp.code==200){
          this.dialogFormVisible = false
          this.$router.go(0)
        }
      })
    },
    // 获取权限列表
    get_rights() {
      right_get().then(resp => {
        this.tableData = resp.data;
      });
    },

    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    }
  }
};
</script>

<style>
</style>
